Los menús son una pieza importante en el blog porque nos ayudan a ordenar el contenido, resulta igual de útil un menú creado con scripts y efectos fantásticos que el más sencillo creado con CSS. En la variedad está el gusto y tenemos multitud de páginas para escoger.
Este menú es fino y muy sencillo y añadiendo los colores acordes con el blog el resultado puede ser muy agradable.
Para añadirlo son dos sencillos pasos. Nos situamos en plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos los estilos.
#navigation {
margin-left:100px; /* Margen izquierdo */
top:25px; /* Margen superior */
}
#navigation li {
float:left;
}
#navigation a {
background-color:#000000; /* color de fondo */
border-bottom:3px solid #FFFFFF; /* Línea inferior *
color:#FFFFFF; /* Color de texto */
display:inline-block;
font-size:13px; /* Tamaño de fuente */
font-weight:normal;
margin-right:1px;
padding:10px 20px 10px; /* Anchura y altura de las pestañas */
text-decoration:none;
text-transform:uppercase; /* Letra mayúscula */
text-shadow:0 1px 1px #CDCDCD ;/* Sombra texto */
}
#navigation a:hover {
border-bottom:3px solid #05C7C0; /* Linea inferior al pasar el cursor (hover) */
color:#05C7C0; /* Color al pasar el cursor (hover) */
}
#navigation li.selected a {
border-bottom:3px solid #05C7C0; /* Color linea inferior fija (Home) */
color:#05C7C0; /* Color texto fijo (Home) */
}
#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
Luego editamos un gadget de HTML y en su interior añadimos lo siguiente:
<div id='navigation'>
<ul>
<li class='selected'><a href='#'>HOME</a></li>
<li><a href='#'>Enlace-1</a></li>
<li><a href='#'>Enlace-2</a></li>
<li><a href='#'>Enlace-3</a></li>
<li><a href='#'>Enlace-4lt;/a></li>
</ul>
</div>
❋ El texto Home lo podemos sustituir por cualquier otro, Inicio, Página principal... es el texto que enlazará la url de nuestro blog, la copiaremos de la barra del navegador y la pegaremos sustituyendo la almohadilla #
❋ Lo mismo haremos con el resto de enlaces, sustituimos la almohadilla por la url que vamos a enlazar. En Enlace-1, 2, 3, 4 añadimos el texto asociado con cada enlace.
Tal cual como decís, es muy fino. Me encantó. Besos!
Hay un post de JMiur donde me uni a las celebraciones por tu segura victoria el 8, pero igual aqui, en casa, te dejo mi abrazo y mi corazon por tu triunfo... merecido, justo, aunque anticipado, creo q ya un echo, felicitaciones.
Hola Gem@
Tengo una consulta. Sabes necesito una plantilla en blanco es decir que no tenga cabecera ni sidebar ni la parte de los post...pero que tenga lo esencial no se si me dejo entender.
Me dijeron que podría ser una plantilla de Zona Cerebral, se llama Framework, pero busqué la página de Zona Cerebral y creo que ya no está disponible.
No sé si sepas dónde puedo conseguir una plantilla como quiero o si tienes quizás podrías pasármela vía correo.
Espero puedas ayudarme :)
Por cierto me enteré por el blog de Vagabundia que eres la ganadora de la Blogoteca (aunque aún falta el anuncio oficial).
Mis felicitaciones y éxitos!!!
:: Filigrana es un buen recurso cuando queremos algo que no atraiga demasiado la atención :)
:: Gracias Jaime eres muy amable :D
:: Juan Carlos P no tengo ese tipo de plantilla, pero es fácil conseguirla partiendo de una plantilla Minima y eliminando secciones a las que no se les van a dar uso, la cuestión es que según el tipo de contenido que vamos a utilizar y la forma que deseamos mostrarlo así son las partes que eliminamos.
Buenas noches Gem@.
Y, MUCHICHISISIMAS FELICIDADES !!, estube viendo el post de JMiur en Vagabundia y me sumo a lo ya dicho, pero no te libraràs de que te vuelva a felicitar en su momento oficial.
Desde aquí un beso virtual, pero con mucho cariño y muchas gracias por todo.
Muchas gracias por el post y muchas felicidades por el premio.
Que lo disfrutes.....
:: Gracias por el comentario y bienvenido Dr.T :)
:: Gildo Kaldorana gracias por estar, que tengas un lindo fin de semana :)
Buenas noches Gemma
Hace poco que sigo tu blog y me parece fantastico el trabajo que haces .Hace muy poquito que me decidi a crear un blog no por placer sino más bien por necesidad ya que creo que es una herramienta muy buena para la comunicación y es algo muy necesario para la asociación donde estoy . He intentado hacer cosillas que tu has publicado y algunas no las he sabido hacer funcionar pero ésta , particularmente , me parece genialmente sencilla y en cuanto tenga un momentín la intentaré poner en practica pero solo tengo una duda . ¿en cada fondo de cada enlace (enlace-1, enlace-2,etc) se podría poner una pequeña imagen o dibujo? Busco algo sencillo pero bonito y si se pudiera hacer estaría muy bien .
Muchas gracias y felicidades ya que parece que ya eres ganadora, no?
:: PACHAMAMA SANT ANDREU se puede añadir una misma imagen para todas las pestañas y preferentemente una textura, sería suficiente con buscar:
background-color:#000000; /* color de fondo */
y en su lugar añadir:
background:#fff url(aquí-url-imagen) repeat ;
En #fff será el color que se mostrará cuando la imagen no cubra el espacio o no se cargue ;)
gracias por el aporte gem@, un saludo.
:: Espero te sea útil ManzurMetal :)
hola gema como estas?
podrias ayudarme?
ya de verdad no se que hacer con la barra de menu pq sigo tus pasos pero me sigue igual:/ el menu es tranparente no tiene color de fondo y cuando pongo el cursor sobre el se pone negro
este es el enlace de mi blog http://angeleyes-gene.blogspot.com/
ayudame xfis!!xD
:: Angel Eyes en tu blog hay un menú y añadidos dos tipos de estilos para el menú, quiero decir que al parecer intentaste solucionar el problema y al final dejaste los estilos de los dos.
Lo puedes solucionar en:
.barrademenu li a:hover {
color: #ffffff;
background: #000000;
outline: none;
}
Donde dice background: #000000; cambia a background: transparent;
jajaja oksxD listo ya se le quito lo negroxDD
y para ponerle un color de fondo? como rojo gris o algo asi y disculpa tanta molestiaxD
:: El color de fondo es background: #990000;
.barrademenu {
margin: 0;
padding: 0;
float: left; width: 100%;
font-family: Tahoma;
font-size:13px;
font-weight: bold;
margin-top: 0px;
border-bottom: 2px solid black;
border-top: 2px solid black;
background: #990000;
}
nopo nanais nadaxD ese codigo ya yo lo habia puesto y los quite y lo volvi a copiar para ver pero nada no le aparece ningun color u.u
:: Como te decía tienes varios estilos definidos para el menú y el que trabaja con él son los que vienen como tabs- que vienen ya en la plantilla y no hacía falta qu elos añadieras.
.tabs-inner .PageList, .tabs-inner .LinkList, .tabs-inner .Labels {
margin-left: -11px;
margin-right: -11px;
background-color: transparent;
border-top: 0 solid #ffffff;
border-bottom: 0 solid #ffffff;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
box-shadow: 0 0 0 rgba(0, 0, 0, .3);
}
En background-color: transparent; deberás añadir un color para el fondo y luego verás que otra vez se ocultan las letras al psar el cursor, puedes arreglarlo en:
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000;
}
gracias!!!!!!!!! eres un sol!:$ ya lo pude hacer!!!
jajajaj tengo todo el dia partiendome el coco con esoxD
muchas gracias:)
:: Pues menos mal que ya lo solucionaste Ángel de lo contrario no quiero pensar como estarías hoy :D
Que es mejor, este tipo de menu o las paginas de Blogger?
:: Una cosa no tiene que ver con la otra Fernando, las páginas de Blogger digamos que es donde se añade el contenido a mostrar y el menú los enlaces para enlazar las páginas y mostrar el contenido.
Hola Gema!! felicitaciones por tu premio, y gracias a 20 minutos porque gracias a dicho periodico he tenido la oportunidad de conocerte.
Quiero hacer mi propio blog, pero estoy perdidisma....
Me he ido a blogger, hice mi primera pagina, pero cuando lo busco en google no aparece...
Que debo hacer?
besos guapa
:: Verónica High Design hay que darse de alta en Google y no es algo inmediato:
http://www.google.es/addurl/
hola gem@ como stas? jaja queria decirte como le cambio el color al menu? es que cuando le cambio el color desde el diseñador de plantillas de blogger se cambia al rededor yo quiero que se cambie tdo osea el color de dentro!!! ayuda!!! rescatame jee
jee quiero el mismo que tiene el ejemplo y sale distinto!!!
:: blog de los simpsons veamos... el diseñador de plantillas no debe4s tocarlo para instalar y configurar el menú, es algo independiente una cosa de la otra.
Simplemente sigue los pasos de la entrada y en el código verás que a la derecha viene información para personalizar los colores del menú.
Por ejemplo para el color de fondo dice:
background-color:#000000; /* color de fondo */
Gracias ya me gusta como me quedo mira entra!!
http://blogdelossimpsons2009.blogspot.com/
ahh y orta cosa como ago para centralizar la imagen de arriva del blog?... gracias por la ayuda sos lo mas (Y)
olaz gema
buen post
pero quiero preguntarte como hago para
poner una entrada en cada diferente submenu
por ejemplo como ago para poner una entrada en el enlace 2 sin que salga en el enlace 1
:: rock te respondí a la misma pregunta en la otra entrada :)
Hola, Gema. He utilizado este menú con fondo negro, y el fondo de mi blog es blanco. Me gustaría que no quedasen espacios entre las pestañas del menú, o que dichos espacios se rellasen de negro.
Por cierto, te dejo un ejemplo de a lo que me refería cuando te hablé del efecto para las fotos en la entrada "Prioritarios en Gmail". Este es el ejemplo: http://vegamusic.es
Me gustaría que el menú quedase parecido al del blog de Vega y que las cuatro miniaturas de las fotos que abren ese efecto fuesen aleatorias y, en el caso de que no se pudiese, ¿cómo podría comentar las fotos, como aparecen en ese blog? Ahora mismo, sólo me permite ponerles un título con unos carácteres limitados.
Te dejo también el enlace de mi blog, para que le eches un ojo!
Gracias.
¡Un saludo!
El enlace de mi blog es: http://cosasquenosedebencontar.blogspot.com
:: Fran para que se vea el fondo del menú negro puedes añadir ese color en el bloque, por ejemplo donde añadiste lo siguiente incluyes el color de fondo.
#navigation {
margin-left: 21px;
top: 25px;
background:#000000;
}
Si lo que deseas es que el efecto presente las esquinas superiores redondeadas puedes mirar esta entrada:
http://gemablog-.blogspot.com/2009/09/border-radius.html
Sería cuestión de añadir en la parte del efecto hover lo siguiente:
#navigation a:hover {
border-bottom:3px solid #05C7C0; /* Linea inferior al pasar el cursor (hover) */
color:#05C7C0; /* Color al pasar el cursor (hover) */
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft: 5px;
}
El tema de las miniaturas mostradas con ventana modal no entiendo a lo que te refieres con "comentar" ¿el texto que hay sobre las fotos? eso está creado con anterioridad quiero decir que se añadió con algún editor de imágenes antes de subir la foto.
Todo lo relacionado con la ventana está relacionado con el script que lo hace trabajar, nosé si hay alguna forma de modificarlo :S
Gracias, Gema. He probado lo del fondo, pero no funciona. Lo que quiero exactamente es que no queden espacios entre las distintas pestañas, que el menú se quede como una franja unificada. ¿Cómo podría modificar el espacio entre las pestañas para que desaparezca?
Lo del borde redondo tampoco ha funcionado.
Con lo de las miniaturas me refería al texto que aparece debajo de las fotos al pinchar en ellas. ¿Cómo podría poner textos debajo de las fotos? En la web de Vega, son textos se pueden seleccionar, copiar y pegar, por lo que no pertenece a la propia imagen, no? No sé si me he explicado bien...
¡Qué pesao soy, che! jaja :P
:: No sé como no me di cuenta antes :S
En la parte que dice:
#navigation a {
background-color:#000000; /* color de fondo */
border-bottom:3px solid #FFFFFF; /* Línea inferior *
color:#FFFFFF; /* Color de texto */
display:inline-block;
font-size:13px; /* Tamaño de fuente */
font-weight:normal;
margin-right:1px;
padding:10px 20px 10px; /* Anchura y altura de las pestañas */
text-decoration:none;
text-transform:uppercase; /* Letra mayúscula */
text-shadow:0 1px 1px #CDCDCD ;/* Sombra texto */
}
Cambia margin-right:1px; a margin-right:0px;
Sobre las miniaturas y los textos no veo tales textos sino una paginación, muestra la cantidad de fotografías que se pueden visualizar, si mostrara una sola imagen con la posibilidad de enlazar más de una se mostraría una paginación con la opción de ir pasando las fotos.
He cambiado la parte de margin-right a 0px, como me has dicho pero sólo ha servido para que se juntara un poco más (como el menú de ejemplo que tienes tú puesto en esta entrada), pero no llega a quedar unido del todo, sigue viéndose un pequeño espacio entre las pestañas.
Lo de los textos, quizás no los veas porque las cuatro miniaturas de fotos que se muestran en la página principal del blog de Vega, son aleatorias y muchas de las fotos no llevan texto.
Te paso la página de las fotos del blog, pincha en las miniaturas de las de USA o de las Buenos Aires. Ahí podrás ver claramente a lo que me refiero: http://www.vegamusic.es/wordpress/?page_id=40
:: Intenta arrastrar el menú a otro espacio y comprueba si no pierde ese espacio tal y como te explicaba en el comentario 34 porqu eme da la sensación que el problema es alguna imagen que tienes en ese gadget.
Lo del texto de las miniaturas lo he visto y no, eso no se puede hacer con Shadowbox que creo que es la que estás usando, con esa puedes añadir el texto arriba.
Lo acabo de probar y tenías razón. He puesto el menú en otra parte del blog y he cambiado la parte de margin-right y el espacio entre las pestañas ha desaparecido. Pero claro, yo quiero que el menú se muestre donde lo tengo ahora mismo puesto. Uso el diseñador de plantillas de Blogger, ¿tiene eso algo que ver? ¿Cómo podría solucionarlo?
En cuanto a lo de las fotos, sí estoy usando Shadowbow y me permite poner un texto arriba de las imágenes, pero tiene que ser un título (corto), porque si el texto se alarga demasiado no lo muestra entero. ¿Cómo podría conseguir el mismo efecto que tiene Vega, con texto incluído?
Y por cierto, me acabo de enterar de que te llamas Julia, perdón por llamarte todo el rato Gema, jaja :P
:: No te preocupes por llamarme Gem@ porque estoy familiarizada con ese nombre, puedes llamarme como quieras.
El problema del menú te comentaba que me daba la sensación de ser alguna imagen de fondo que estabas utilizando por eso en la prueba no surge ese problema.No sé cómo puede solucionarse al estar usando el diseñador.
Y en efecto el espacio para la ventana modal es para un título no da para una frase quizás en los estilos de la ventana modal pueda modificarse y darle más anchura a ese espacio pero nunca como para añadir un párrafo tal y como en ese blog de Vera :S
Hola Gema! Instalé este menú pero tengo un problema: toma como color de las letras de las pestañas (excepto la primera) como el color de los links del blog, me explico? No importa que lo cambie, sigue tomando los otros! No se como hacer :( Podría cambiar todos los links al color ese, pero en el footer los necesito negros. Este es el blog mirá: http://nfesiyrejktdf.blogspot.com/
Muchas gracias!
Que lindo nombre Julia por cierto :)
:: Hola Filigrana, prueba forzando el color de esta forma:
color: #ff0000 !important;
Hola Julia, habría alguna forma de que el efecto que se queda fijo en la pestaña Home, se aplicara a cualquier pestaña según estás en las distintas páginas del blog. Es decir que cuando navegas por las distintas páginas del blog, aparezca marcada la pestaña de la página en la que te encuentras. Como en www.vegamusic.es
:: Hola Fran, se puede probar con:
#navigation a:active{
border-bottom:3px solid #05C7C0;
color:#05C7C0;
}
No, Julia. Eso sólo funciona al pinchar en la pestaña, pero no se mantiene el estilo una vez que estás en la página.
¿Se te ocurre alguna manera?
:: Para que siempre quede marcado verás que añade la clase selected y dice Color linea inferior fija (Home) :) li class='selected' :D
No lo he conseguido. Pero bueno, tampoco es tan importante. ¿Qué partes del código y cómo tendría que modificarlas para que el subrayado del menú fuese un poco más ancho y estuviese arriba en lugar de abajo e incorporar una flecha debajo del texto? Es decir, igual que en este blog www.vegamusic.es
Te envío mi plantilla por email para que si puedes le eches un vistazo porque yo lo intenté pero no quedaba bien.
:: No hace falta me mandes la plantilla Fran, la forma de añadir un borde en la parte de abajo es la misma que ya tienes solo que en lugar de border-bottom sería border-top.
El tema de la flecha ya no puedo indicarte porque no sé como lo hicieron :S
Nota: solo los miembros de este blog pueden publicar comentarios.